import type { DescriptionsProps } from 'antd';
import { Descriptions, Tag } from 'antd';
import React from 'react';

const items: DescriptionsProps['items'] = [
  {
    key: '1',
    label: '在押',
    children: '16',
  },
  {
    key: '2',
    label: '会见中',
    children: '3',
  },
  {
    key: '3',
    label: '提审中',
    children: '3',
  },
  {
    key: '4',
    label: '待会见',
    children: '4',
  },
  {
    key: '5',
    label: '待提审',
    children: '2',
  },
  {
    key: '6',
    children: (
      <div>
        <Tag color="red">高</Tag>高风险(2)
      </div>
    ),
  },
  {
    key: '7',
    children: (
      <div>
        <Tag color="blue">病</Tag>病号(2)
      </div>
    ),
  },
  {
    key: '8',
    children: (
      <div>
        <Tag color="green">新</Tag>新入监(2)
      </div>
    ),
  },
  // {
  //   key: '9',
  //   children: (
  //     <div>
  //       <Tag color="red">高</Tag>高风险(2)
  //     </div>
  //   ),
  // },
  // {
  //   key: '10',
  //   children: (
  //     <div>
  //       <Tag color="red">高</Tag>高风险(2)
  //     </div>
  //   ),
  // },
];

const App: React.FC = () => (
  <Descriptions
    labelStyle={{ fontSize: 22 }}
    contentStyle={{ fontSize: 22 }}
    column={5}
    items={items}
    style={{ height: '103px' }}
  />
);

export default App;
